<template>
  <el-dialog
    :close-on-click-modal="false"
    @close="$emit('close')"
    title="领用"
    :visible="showGet"
    width="60%"
    append-to-body
  >
    <el-table
      class="table"
      :header-cell-style="{ background: '#5a9cf8', color: '#fff' }"
      :data="list"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column prop="name" label="物料名称" >
        <template slot-scope="scope">
           <span v-if="scope.row.isAdd"></span>
           <span v-else> {{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="申领量" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isAdd"></span>
          <span v-else>{{ scope.row.num }} {{ scope.row.unit }}</span >
        </template>
      </el-table-column>
      <el-table-column prop="realNum" label="领用量"  align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.genre==2">1  {{ scope.row.unit=='mL' || scope.row.unit=='g'? '瓶' :scope.row.unit}}</span>
          <template v-else>
            <el-input style="width: 80%;" size="small" type="number" v-model="scope.row.realNum"></el-input>{{ scope.row.unit }}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="条码" align="center">
        <template slot-scope="scope">
          <el-input size="small" v-model="scope.row.barCode"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center">
        <template slot-scope="scope">
          <el-button  icon="el-icon-plus" type="primary" size="mini" @click="addInfo(scope.row,scope.$index)"></el-button>
        </template>
      </el-table-column>
      <el-table-column width="50">
                <template slot-scope="scope" v-if="scope.row.genre==2&&scope.row.isAdd">
                  <i
                    class="el-icon-circle-close del"
                    @click="delInfo(scope.$index)"
                  ></i>
                </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取消</el-button>
      <el-button type="primary" @click="toGet">领用</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getHazardousChemicalsInfoByIdAPI } from '@/api/hazardousChemicals'
import { toGetProductAPI, getStorehouseDetailAPI } from "@/api/web/hjUser";
export default {
  props: {
    showGet: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      list: []
    };
  },

  async created() {
    // this.info.store=this.info.store.map(item=>({...item,barCode:''}))
    const res = await getStorehouseDetailAPI(this.info.id);
    this.list = res.map(item => ({ ...item, barCode: "",realNum:'',isAdd: false}));
  },

  methods: {
    async toGet() {
      const info = this.list.map(item => ({name: item.name,barCode:item.barCode,realNum: item.genre==2? '1' :item.realNum}));
      const isGet = info.every((item, index) => {
        if (!item.barCode||!item.realNum) {
          this.$message.error(`请输入序号为${index + 1}的条码或者实际领用量`);
          return false;
        } else {
          return true;
        }
      });
      if (isGet) {
        // let count = 0
        // let asyncCount = 0
        // const leg = this.list.filter(item=>item.unit == '支').length
        // this.list.forEach(async (item)=>{
        //   if(item.unit == '支'){
        //      try {
        //        const res  = await getHazardousChemicalsInfoByIdAPI(item.barCode)
        //        asyncCount += 1
        //        if(item.realNum > res.residue){
        //             count += 1
        //           return  this.$message.error(item.name+'-该条码最多领取'+res.residue+'支')
        //         }
        //      } catch (error) {
        //      }finally{
        //       if(asyncCount == leg&&count==0){
        //           try {
        //             await toGetProductAPI({
        //             id: this.info.id,
        //             data: info
        //           });
        //           this.info.status = 5;
        //           this.$emit("close");
        //           this.$message.success('领用成功')
        //           } catch (error) {
        //             this.$message.error(`条码不正确`)
        //           }
        //       }

        //      }
        //   }
        // })

        try {
          const res = await toGetProductAPI({
          id: this.info.id,
          data: info
        });
        console.log(res);
        if(res.name){
          this.$message.error(res.name+'-该条码最多领取'+res.amount)
        }else {
          this.info.status = 5;
        this.$emit("close");
        this.$message.success('领用成功')
        }
        } catch (error) {
          console.log(error.response);
          this.$message.error(`条码不正确`)
        }

      }
    },
    delGetBarCode(){},
    addInfo(row,index){
      this.list.splice(index+1,0,{...row,barCode:'',realNum: '',isAdd: true})
    },
    delInfo(i){
      this.list=this.list.filter((item,index) =>i != index)
    },
  }
};
</script>

<style scoped lang="scss">
 .del {
    font-size: 20px;
   }
   .table ::v-deep {
    font-size: 16px;
    .el-input--small .el-input__inner {
      height: 45px;
    }
   }
   .dialog-footer {
    button{
      height: 40px;
      font-size: 16px;
    }
  }
</style>
